<template>
  <view>
    <u-navbar title="我的收藏" title-color="#000" back-icon-color="#000" :background="background" :border-bottom="false">
    </u-navbar>


    <view class="message-container">
      <view class="tabs-view2 u-f-ac u-f-jsa">
        <!-- <u-tabs :list="tabsList" :is-scroll="false" :current="current" @change="changeTabs" active-color="#FD5B00"
          bar-width="80"></u-tabs> -->
        <view class="tabs_item" :class="index == tabsCurrent ? 'tabs_active' : ''"
          v-for="(item, index) in tabsList" :key="index" @click="changeTabs(index)">{{item.name}}</view>
      </view>

      <mescroll-body ref="mescrollRef" top="0" :down="down" @init="mescrollInit" @down="downCallback" @up="upCallback">
        <view v-if="tabsCurrent === 0">
          <uni-swipe-action>
            <uni-swipe-action-item v-for="(item, index) in goodsList" :key="index" :right-options="options"
              @click="handleDeleteGoodsColl(index)">
              <navigator :url="'/goods-module/goods?goods_id='+ item.goods_id" hover-class="none" style="width: 100%;">
                <goods-cell-search :goodsName="item.goods_name" :goodsImg="item.goods_img"
                  :goodsPrice="item.goods_price" :goodsBuyCount="-1" :goodsCommentNum="-1"></goods-cell-search>
              </navigator>
            </uni-swipe-action-item>
          </uni-swipe-action>
        </view>
        <view v-if="tabsCurrent === 1">
          <uni-swipe-action class="shop-collect-container">
            <uni-swipe-action-item v-for="(shop, index) in shopList" :key="index" :right-options="options"
              @click="handleDeleteShopColl(index)">
              <navigator :url="'/pages/shop/shop?tabNum=0&shop_id='+ shop.shop_id" hover-class="none"
                style="width: 100%;">
                <shop-cell-search :shopName="shop.shop_name" :shopLogo="shop.logo"></shop-cell-search>
              </navigator>
            </uni-swipe-action-item>
          </uni-swipe-action>
        </view>
      </mescroll-body>
    </view>



  </view>
</template>

<script>
  import * as API_Members from '@/api/collection.js'

  // 引入mescroll-mixins.js
  import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

  export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
      return {
        tabsList: [{
            name: '商品'
          },
          {
            name: '店铺'
          }
        ],
        tabsCurrent: 0,
        params: {
          page_no: 1,
          page_size: 10
        },
        goodsList: [], //收藏商品
        shopList: [], //收藏店铺
        options: [{
          text: '取消收藏',
          style: {
            backgroundColor: '#FD5B00',
            'font-size': '22rpx',
            'font-weight': '600'
          }
        }],
        down: {
          auto: false
        },
        background: {
          background: 'rgba(0,0,0,0)',
          // background: 'url(../../../static/images/member/cart-bg.png) no-repeat',
          // backgroundSize: 'cover'
        },
      }
    },
    methods: {
      downCallback() {
        this.changeTabs(this.tabsCurrent)
      },
      upCallback(page) {
        this.params.page_no = page.num
        if (this.tabsCurrent === 0) {
          this.getCollection()
        } else {
          this.getShopCollection()
        }
      },
      changeTabs(index) {
        this.tabsCurrent = index
        this.goodsList = []
        this.shopList = []
        this.params.page_no = 1
        if (this.tabsCurrent === 1) {
          this.shopList = []
          this.getShopCollection()
        } else {
          this.goodsList = []
          this.getCollection()
        }
      },

      // 获取收藏的店铺
      getShopCollection() {
        API_Members.getShopCollection(this.params).then(response => {
          const {
            data
          } = response
          if (data && data.length) {
            data.forEach(key => {
              key.show = false
            })
            this.shopList = this.shopList.concat(data)
          }
          this.mescroll.endBySize(data.length, response.data_total)
        }).catch(error => {
          this.mescroll.endErr()
        })
      },
      //左滑取消店铺收藏
      handleDeleteShopColl(index) {
        const shop_id = this.shopList[index].shop_id
        API_Members.deleteShopCollection(shop_id).then(() => {
          this.params.page_no = 1
          this.shopList = []
          this.getShopCollection()
        })
      },
      // 获取收藏的商品
      getCollection() {
        API_Members.getGoodsCollection(this.params).then(response => {
          const {
            data
          } = response
          if (data && data.length) {
            data.forEach(key => {
              key.show = false
            })
            this.goodsList = this.goodsList.concat(data)
          }
          this.mescroll.endBySize(data.length, response.data_total)
        }).catch(error => {
          this.mescroll.endErr()
        })
      },
      //左滑取消商品收藏
      handleDeleteGoodsColl(index) {
        const goods_id = this.goodsList[index].goods_id
        API_Members.deleteGoodsCollection(goods_id).then(() => {
          this.params.page_no = 1
          this.goodsList = []
          this.getCollection()
        })
      }
    }
  }
</script>

<style lang="scss">
  .item {
    display: flex;
    padding: 20rpx;
  }

  .title {
    text-align: left;
    font-size: 28rpx;
    color: $u-content-color;
    margin-top: 20rpx;
  }
</style>


<style lang="scss">
  page {
    width: 100%;
    background: url(/static/images/member/cart-bg.png) no-repeat 0 0;
    background-size: 100% 400rpx;
    background-color: #ffffff;
  }


  .message-container {
    background-color: #F4F5F7;
    border-radius: 40rpx 40rpx 0 0;
    padding: 40rpx 30rpx 0;
  }

  .tabs-view2 {
    width: 100%;
    border-radius: 50rpx;
    overflow: hidden;
    border: 2px solid #FF1634;
    margin-bottom: 40rpx;

    .tabs_item {
      padding-bottom: 20rpx;
      border-bottom: 4px solid #FF6C00;
      color: #FF1634;
      background-color: #fff;
      box-sizing: border-box;
    }

    .tabs_active {
      background-color: #FF1634;
      color: #fff;
    }
  }

  /deep/ .goods-view {
    border-radius: 20rpx !important;
    margin-bottom: 30rpx !important;
    padding: 20rpx !important;

  }

  /deep/ .u-image {
    width: 160rpx !important;
    height: 160rpx !important;
  }
</style>